﻿html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
	color: #333;
	font: 14px/1.5;
	background:url(../img/bg.png);
	background-size: 100% 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}
/*用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用  但是有的安卓机型还是避免不了，比如小米2  那么就不用这几个标签，可以用div*/
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}
input,textarea{
	margin: 0;
	padding: 0;
	outline: 0;
	-webkit-appearance: none;
	border-radius: 0;
	font-family: "Microsoft YaHei";
}

a,a:link,a:visited,a:hover,a:active {
	text-decoration: none;
	color: #333;
	-webkit-tap-highlight-color: transparent;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

ol,ul {
	list-style: none;
}

hr {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	background-color: #000;
	height: 1px
}

.Absolute-Center {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.clear {
	clear: both;
	height: 0px;
	font-size: 0px;
	line-height: 0px;
	overflow: hidden;
}

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}

/* IE 6/7 */
.fl {
	float: left;
}
.fr {
	float: right;
}

/*单行文本省略号*/
.word1 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.words2 {
	display: -webkit-box;
	display: box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
/*多行文本省略号*/
.words3 {
	display: -webkit-box;
	display: box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
/*给里面子元素需要平均分配的大盒子加上这两个类名：flex flex-pack-justify*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

/*垂直居中,容器设置宽高*/
.ycenter {
	align-items: center;
	display: -webkit-flex;
}
/*水平居中,容器设置宽高*/
.xcenter {
	justify-content: center;
	display: -webkit-flex;
}

/*弹性布局水平垂直居中 兼容性高*/
.xycenterbox{
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
	-webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}
/*弹性布局水平居中 兼容性高*/
.xcenterbox{
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}
/*弹性布局垂直居中 兼容性高*/
.ycenterbox{
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

/*0.5px底边框*/
.bottomLine{
	background: -webkit-linear-gradient(top,transparent 50%,#ebebeb 50%) center bottom no-repeat;
	background: -moz-linear-gradient(top, transparent 50%, #ebebeb 50%) center bottom no-repeat;
	background: -ms-linear-gradient(top, transparent 50%, #ebebeb 50%) center bottom no-repeat;
	background-size: 100% 1px;
}

/*设置隐藏*/
.none {
	display: none;
}
.hidden {
	visibility: hidden;
}

/*加载更多动画*/
.pullUp {
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	color: #b3b3b3;
	display: none;
}
.pullUp .pullUpIcon {
	display: inline-block;
	vertical-align: top;
	width: 16px;
	height: 16px;
	margin: 12px 9px 0 0;
	background: url(http://img.learn.16q.cn/home/2/new/refresh.png) no-repeat;
	background-size: contain;
	-webkit-transform: rotate(0deg) translateZ(0);
	-webkit-transition-duration: 0ms;
	-webkit-animation-name: loading;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes loading {
	from {
		-webkit-transform: rotate(0deg) translateZ(0);
	}
	to {
		-webkit-transform: rotate(360deg) translateZ(0);
	}
}
@-webkit-keyframes qn {
	0% {
		transform: rotateZ(0deg);
		-ms-transform: rotateZ(0deg);
		-moz-transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
		-o-transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
		-ms-transform: rotateZ(360deg);
		-moz-transform: rotateZ(360deg);
		-webkit-transform: rotateZ(360deg);
		-o-transform: rotateZ(360deg);
	}
}
@-webkit-keyframes qw {
	0% {
		transform: rotateZ(0deg);
		-ms-transform: rotateZ(0deg);
		-moz-transform: rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
		-o-transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(-360deg);
		-ms-transform: rotateZ(-360deg);
		-moz-transform: rotateZ(-360deg);
		-webkit-transform: rotateZ(-360deg);
		-o-transform: rotateZ(-360deg);
	}
}
.kp_qw {
	-webkit-animation: qw 6s linear 0s infinite;
	-o-animation: qw 6s linear 0s infinite;
	animation: qw 6s linear 0s infinite;
}
.kp_qn {
	-webkit-animation: qn 6s linear 0s infinite;
	-o-animation: qn 6s linear 0s infinite;
	animation: qn 6s linear 0s infinite;
}
.header{padding-top:70px;margin-bottom:50px;}
.header p{font-size:48px;color:#fefafa;margin-left:26px;letter-spacing: 5px;}
.main-top{padding-top:136px;margin:0 auto 45px;position:relative;width: 885px;height: 781px;background:url(../img/top_bg.png);background-size: 100% 100%;}
.main-top>p{position:absolute;top:0;right:10px;width:370px;text-align:center;height:72px;line-height:72px;font-size:34px;color:#b4dffb;}
.bookInfo{width: 775px;height: 266px;margin:0 auto 44px;background: rgba(59,93,200,0.25);}
.bookInfo>div{padding-top:10px;}
.bookInfo>div>p{font-size: 22px;color:#fafdfd;margin-bottom:20px;}
.bookInfo>div>p>span{display:inline-block;vertical-align: top;}
.bookInfo>div>p>span:nth-of-type(2){width: 120px;}
.bookInfo>img:nth-of-type(1){width: 165px;height: 245px;}
.bookInfo>img:nth-of-type(2){margin:0 70px 0 70px;width: 170px;height: 170px;}
.main-bottom .bot-title{margin:-10px auto 0;font-size:34px;color:#b4dffb;width: 425px;height: 162px;background: url(../img/bot_title.png);background-size: 100% 100%;text-align: center;line-height: 115px;}
.main-bottom .bot-num{margin-bottom:30px;}
.main-bottom .bot-num>div:nth-of-type(1){margin-right:12px;font-size:30px;color:#b4dffb;width: 175px;height: 55px;background: url(../img/border.png);background-size: 100% 100%;text-align: center;line-height: 55px;}
.main-bottom .bot-num .num-bg{
	width: 700px;height: 50px;background: rgba(59,93,200,0.3);
	-webkit-border-radius: 22.5px;
	-moz-border-radius: 22.5px;
	border-radius: 22.5px;
	position: relative;
}
.main-bottom .bot-num .num-bar{
	position: absolute;
	width: 50%;
	height: 100%;
	-webkit-border-radius: 22.5px;
	-moz-border-radius: 22.5px;
	border-radius: 22.5px;
	left:0;
	top:0;
	background:rgba(59,93,200,0.75);

}
.main-bottom .bot-num .num-bg>div>div{font-size:28px;color:#f5f8fa;height: 50px;line-height:50px;padding-left:50px;}
.bot-circle{
	position: relative;
	margin-top: 150px;
}
.bot-circle a{padding:114px 0 0 84px;font-size:30px;color:#f5fdfd;display:block;width:320px;height:320px;text-align:center;background: url(../img/arrow.png);background-size: 100% 100%;margin:auto;}
.bot-circle a span{display: block;width: 145px;}
.circle{
	position: absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -9999;
}